import React, { useState, useMemo, useEffect } from 'react';
import cn from 'classnames';
import s from './style.module.css';
import i from '../../index.module.css';
import { Loading, Radio, Icon, Input, Message } from '@knownsec/react-component';
import BreadCrumb from '@/components/BreadCrumb';
import { getMfaCode, bindMfa, unbindMfa, getUserInfoDetail } from '~/API';
import { getErrorMessage } from '@/common/constant';

export default function AuthMethod() {
  const text=JSON.parse(localStorage.oem)
  const [value, setValue] = useState('many');
  const [imgs, setImgs] = useState('');
  const [val, setVal] = useState('');
  const [loading, setLoading] = useState(true);
  const [cur, setCur] = useState('mfa');
  const [unbind, setUnbind] = useState('');
  const isMany = useMemo(() => {
    return value === 'many' ? true : false;
  }, [value]);
  useEffect(() => {
    getMfaCode('GET').then((res) => {
      setImgs('data:image/png;base64,' + res.data.img);
    });
    getUserInfo();
  }, []);
  const getUserInfo = () => {
    getUserInfoDetail('GET')
      .then((res) => {
        setLoading(false);
        setValue(res.data.validate_method === 'mfa' ? 'many' : 'normal');
        setCur(res.data.validate_method);
      })
      .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
  };
  const startCode = () => {
    bindMfa('POST', { mfa_token: val })
      .then((res) => {
        Message.show({
          type: res.status,
          message: res.message,
          onclose() {
            getUserInfo();
          },
        });
      })
      .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
  };
  const cancelMfa = () => {
    unbindMfa('POST', { mfa_token: unbind })
      .then((res) => {
        Message.show({
          type: res.status,
          message: res.message,
          onclose() {
            getUserInfo();
          },
        });
      })
      .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
  };
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '用户管理' },
          { link: '', name: '认证方式', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={cn(s.bgc, i.pr)}>
          <Loading show={loading} />
          <div className={i.pt24}>
            <p className={cn(i.pl24, i.pr24)}>认证方式</p>
            <div className={cn(i.mt24, i.pl24, i.pr24)}>
              <Radio.Group onChange={(e) => setValue(e.target.value)} value={value}>
                <Radio value={'many'}>多因素认证</Radio>
                <Radio disabled={cur === 'mfa'} value={'normal'}>
                  账号密码认证
                </Radio>
              </Radio.Group>
            </div>
            {isMany ? (
              <div className={cn(i.mt24, s.line)}>
                {cur !== 'mfa' ? (
                  <div className={cn(i.df, i.aifs)}>
                    <div className={cn(s.f2, i.p24)}>
                      <p className={s.info}>
                        {text.title}采用多因素验证(以下简称 MFA
                        )来保护您的登录安全，您可以通过它在登录、关机、重启、模式切换等重要操作中进行二次身份校验
                      </p>
                      <div className={cn(i.mt24, s.bor, i.ml10)}>
                        <div>
                          <p className={s.ml_13}>
                            <span className={s.dot}>1</span>
                            <span className={cn(i.ml15, s.cor)}>在移动智能设备上安装 MFA 应用</span>
                          </p>
                          <p className={cn(s.ml27, i.primaryColor, i.mt10)}>
                            • iPhone 手机 - 请从 App Store 中安装 : “
                            <span className={i.mainColor}>OTP</span>“ 应用
                          </p>
                          <p className={cn(s.ml27, i.primaryColor, i.mt10)}>
                            • Android 手机 - 请从可信的应用市场安装 : ”
                            <span className={i.mainColor}>OTP</span>“ 应用
                          </p>
                        </div>
                        <div className={s.mt35}>
                          <p className={s.ml_13}>
                            <span className={s.dot}>2</span>
                            <span className={cn(i.ml15, s.cor)}>
                              请使用 MFA 应用程序扫码获取安全码
                            </span>
                          </p>
                          <div>
                            <img src={imgs} alt="" className={s.mg90} />
                          </div>
                        </div>
                        <div className={s.mt35}>
                          <p className={s.ml_13}>
                            <span className={s.dot}>3</span>
                            <span className={cn(i.ml15, s.cor)}>请输入6位安全码</span>
                          </p>
                        </div>
                      </div>
                      <div>
                        <div className={s.ml28}>
                          <Input
                            pro
                            className={cn(i.w300, i.mt15)}
                            autoComplete={'off'}
                            placeholder="请输入6位数字安全码"
                            onChange={({ value }) => setVal(value)}
                            value={val}
                          />
                        </div>
                        <div className={cn(s.btn, s.ml27)} onClick={startCode}>
                          确认启用
                        </div>
                      </div>
                    </div>
                    <div className={cn(s.f1, i.p24, i.df)}>
                      <div className={i.dib}>
                        <Icon type="error" className={cn(s.error)} />
                      </div>
                      <div className={cn(i.dib, i.ml5, i.fs12)}>
                        <p className={s.cor}>
                          您的账号已被多人共享使用，那么当您成功绑定MFA之后，其他未绑定MFA的人将无法登录
                        </p>
                        <br />
                        <p className={i.primaryColor}>
                          让其他人也安装MFA应用程序并扫描此页的二维码，或者保存此二维码图片供其他人后续进行扫码。但从安全角度建议，您可以取消多人共享账号，使用子账号功能。
                        </p>
                        <br />
                        <br />
                        <p className={s.cor}>
                          如您因为某些原因（如手机丢失或误删除MFA应用等）无法进行验证
                        </p>
                        <br />
                        <p className={i.primaryColor}>请联系在线客服，解除MFA绑定。</p>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className={cn(i.pr)}>
                    <div className={s.w400}>
                      <div className={i.tac}>
                        <Icon type="success" className={cn(s.fs40, i.vam)} />
                        <span className={cn(i.fs20, i.vam)}>您已开启登录保护</span>
                      </div>
                      <p className={cn(i.tac, i.mt15)}>
                        如需解除登录保护，请在下面输入框中输入安全码，并点击“确认解绑”即可解除MFA绑定
                      </p>
                      <div className={cn(s.vinp)}>
                        <span>绑定密钥：******</span>
                        <span className={s.bds}>已绑定</span>
                      </div>
                      <div className={i.mt10}>
                        <Input
                          placeholder={'请输入6位安全码'}
                          autoComplete={'off'}
                          onChange={({ value }) => setUnbind(value)}
                          value={unbind}
                        />
                      </div>
                      <div className={cn(i.mt10, i.tac, s.cacelbd)} onClick={cancelMfa}>
                        解除绑定，使用账号密码认证
                      </div>
                      <div className={i.mt30}>
                        <p>
                          <Icon type="question" className={cn(i.errorColor, i.fs16, i.vam)} />
                          <span className={i.vam}>
                            如您因为某些原因（如手机丢失或误删除MFA应用等）无法进行验证
                          </span>
                        </p>
                        <p className={cn(i.fs12, i.primaryColor, i.mt10)}>
                          请联系在线客服，解除MFA绑定。
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <div className={cn(i.mt30, i.pl24)}></div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
